<template>
  <div class="page-wrapper">
    <view class="imgs" v-if="!signSuccess">
      <img mode="widthFix" :src="saveImgPath" style="width: 100%; height: 100%" @click="onImgClick" />
      <!-- <img :src="sealString" class="sealString" :style="{top: `${1800}px`, left: `${300}px` }"> -->
    </view>
    <view v-if="!signSuccess" class="fixed-btm">
      <view class="btnrow">
        <button class="btn btn-sign" @click="backUpdate">修改签名</button>
        <button :disabled="disabledSubmit" class="btn btn-preview" @click="confirmSign">确认签署</button>
      </view>
    </view>
    <!-- 签署成功展示 -->
    <div v-if="signSuccess" class="tip-wrapper">
      <div class="tippic">
        <img src="/contract/img/chenggong.png" alt />
      </div>
      <p class="tips bold">签署成功</p>
      <p class="tips">跳转我的合同…</p>
    </div>
    <u-modal v-model="show" :title="null" :show-confirm-button="false">
      <view class="sign-content">
        <div class="sign-tit">承诺声明</div>
        <div class="sign-desc">本人确保该合同为本人签署，就签订合同作出本人签署承诺，并愿承担相关法律责任。</div>
        <button class="sign-m-btn" @click="getCheckEleContract">确定为本人签署</button>
      </view>
    </u-modal>
    <u-modal v-model="showSign" :confirmColor="settings.theme" @confirm="confirmSignContent" content="合同未生成，请退出重新签署"></u-modal>
  </div>
</template>
<script>
import { myContractList, personSignReq, setJpgToAppendix, checkEleContractReq } from "@/services/contract";
import { mapState } from "vuex";
import { downloadFile } from "@/services/common";
export default {
  onLoad: function(options) {
    this.sealString = uni.getStorageSync("sign");
    if (options.id) {
      this.contractId = options.id;
    } else {
      this.contractId = uni.getStorageSync("contractIdP");
    }
    if (!this.contractId) {
      this.showSign = true;
      this.show = false;
    }
  },
  data() {
    return {
      showSign: false,
      contractlist: [],
      phone: "",
      code: "",
      signSuccess: false,
      showTimmer: false,
      second: 60,
      text: "获取验证码",
      disabledGetVerificationCode: false,
      disabledSubmit: false,
      sealString: "",
      contractId: "",
      hasConfirm: false,
      show: true,
      saveImgPath: ""
    };
  },
  computed: {
    ...mapState(["user", "settings"])
  },
  created() {
    this.getContractList();
  },
  mounted() {
    this.phone = this.user.phone;
  },
  methods: {
    onImgClick() {
      uni.previewImage({
        urls: [this.saveImgPath],
        current: this.saveImgPath,
        success: res => {
          console.log("success", res);
        },
        fail: err => {
          console.log("fail", err);
        }
      });
    },
    confirmSignContent() {
      wx.navigateBack({
        delta: 2
      });
    },
    getCheckEleContract() {
      uni.showLoading({
        mask: true,
        title: "加载中..."
      });

      checkEleContractReq(this.contractId)
        .then(res => {
          if (res) {
            if (res.name) {
              this.checkImg(res.name);
            } else {
              this.checkPdf(res.path);
            }
          }
        })
        .catch(err => {
          uni.hideLoading();
          console.log(err);
        });
    },
    checkImg(path) {
      this.saveImgPath = `${path}?token=` + uni.getStorageSync("token");
      uni.hideLoading();
      this.show = false;
    },
    checkPdf(path) {
      downloadFile(path)
        .then(res => {
          this.tempPath = res.tempFilePath;
          uni.saveFile({
            tempFilePath: this.tempPath,
            success: fileRes => {
              this.savedFilePath = fileRes.savedFilePath;
              uni.hideLoading();
              this.show = false;
              this.preview();
            },
            fail: fileErr => {
              uni.hideLoading();
              uni.showToast({
                title: fileErr,
                icon: "none",
                duration: 2000
              });
            }
          });
        })
        .catch(err => {
          uni.hideLoading();
          uni.showToast({
            title: err,
            icon: "none",
            duration: 2000
          });
        });
    },
    preview() {
      this.openFile(this.savedFilePath);
    },
    openFile(path) {
      uni.openDocument({
        filePath: path,
        fileType: "pdf",
        success: () => {},
        fail: err => {
          uni.showToast({
            title: err.message,
            icon: "none",
            duration: 2000
          });
        }
      });
    },
    confirmSign() {
      this.disabledSubmit = true;
      uni.showLoading({
        title: "合同签署中..."
      });
      personSignReq({
        code: this.code,
        contractId: this.contractId,
        sealString: this.sealString
      })
        .then(async res => {
          this.disabledSubmit = false;
          uni.hideLoading();
          this.signSuccess = true;
          uni.showLoading({
            title: "文件上传中..."
          });
          await setJpgToAppendix(this.contractId);
          uni.hideLoading();
          const timer = setTimeout(() => {
            uni.reLaunch({
              url: "/contract/index"
            });
            clearTimeout(timer);
          }, 1000);
        })
        .catch(err => {
          console.log("debug log --> ", err);
          this.disabledSubmit = false;
          uni.hideLoading();
          uni.showToast({
            title: err.message,
            icon: "none",
            duration: 2000
          });
        });
    },
    getContractList() {
      myContractList().then(res => {
        this.contractlist = res.data;
      });
    },
    backUpdate() {
      uni.navigateBack();
    }
  }
};
</script>
<style lang="scss">
.page-wrapper {
  width: 100%;
  padding-bottom: 100px;
  .imgs {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    .sealString {
      z-index: 9;
      position: absolute;
      width: 50px;
      height: 50px;
    }
  }
  .contract-content {
    width: 100%;
    background: #fff;
    overflow: hidden;
  }
  .fixed-btm {
    width: 100%;
    text-align: center;
    z-index: 3;
    position: fixed;
    bottom: 0;
    left: 0;
    padding: 20px;
    box-sizing: border-box;
    height: 100px;
    background: $white;
    border-radius: 20px 20px 0px 0px;
    box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.08);
    .btnrow {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .btn {
        width: 150px;
        height: 50px;
        border-radius: 12px;
        font-size: 14px;
        font-weight: 400;
        line-height: 50px;
      }
      button::after {
        outline: none;
        border: none;
      }
      .btn-sign {
        color: $fc2;
        background: $bg-gray;
        border: 1px solid $border;
      }
      .btn-preview {
        color: $white;
        background: $theme;
      }
    }
    .ver-tip {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid $border;
      padding-bottom: 15px;
      img {
        width: 36px;
        height: 36px;
      }
      p {
        width: calc(100vw - 40px - 36px - 5px);
        height: 36px;
        font-size: 12px;
        font-weight: 400;
        color: $fc2;
        line-height: 17px;
        text-align: left;
      }
    }
    .sendcode {
      padding-top: 15px;
      .sendcode-title {
        font-size: 18px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 25px;
        text-align: left;
      }
    }
  }
}
.tip-wrapper {
  width: 375px;
  height: 100vh;
  overflow-x: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4;
  .tippic {
    img {
      display: block;
      width: 168px;
      height: 168px;
      margin: 104px auto 14px;
    }
  }
  .tips {
    width: 308px;
    height: 40px;
    font-size: 14px;
    font-weight: 400;
    color: rgba(156, 156, 156, 1);
    line-height: 20px;
    display: block;
    margin: 0 auto;
    text-align: center;
  }
  .bold {
    font-weight: 500;
    color: #565656;
  }
}
.sign-content {
  height: 200px;
  text-align: center;
  .sign-tit {
    font-size: 18px;
    font-weight: 500;
    color: #333333;
  }
  .sign-desc {
    font-size: 14px;
    font-weight: 400;
    color: #333333;
    margin: 20px 0 30px 0;
    padding: 0 36px;
  }
  .sign-m-btn {
    width: 266px;
    height: 44px;
    background: $theme;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
  }
}
</style>
